// 导入axios包
import axios from 'axios'
import store from '@/store'
import { Message } from 'element-ui'
import router from '@/router'
// 自定义axios
const request = axios.create({
  // baseURL: '/api'  不要写死，写成变量，让不同的环境，自动变换
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 6000
})

// 自定义拦截器
// 请求拦截器---请求之前执行的函数
// 有两个参数，分别是两个回调函数(开始的时候不执行，回过头来，在特定的时机在执行)
// 第一个回调函数，是请求发送成功以后执行的函数
// 第二个回调函数，是请求发送失败以后执行的函数
request.interceptors.request.use((config) => {
  if (store.state.user.token) {
    config.headers.Authorization = `Bearer ${store.state.user.token}`
  }
  return config
}, error => Promise.reject(error))

// 响应拦截器
request.interceptors.response.use((response) => {
  // 10119是后端未登录的
  if (response.data.success) { // +++++++++++++++++++++
    return response.data
  } else {
    // /这个if分支，表示业务失败，应该给用户提示，并且用Promise.rejecti返回，主要是让我们的业务代码，执行catch里面去
    // 给用户一些使用提示，提示的话，不能使用alert,卡死览器，不好，要用e1 ement-ui的一些提示组件
    console.log('业务报错了')
    // 下面这种代码，是在.vue后缀的文件里面用的，硬因为this必须要是ue组件实例
    // 而我们这个.js文件是不能使用this的，或者说下面this指向的是undefined
    // this Is$message('这是一条消息提示')

    Message.error({ message: response.data.message })
    return Promise.reject(response)
  }
}, (error) => {
  console.dir(error)
  if (error?.response?.status === 401) {
    store.dispatch('user/removertokenAction')
    router.push('/login')
  }
  return Promise.reject(error)
}
// http状态码是4xx 5xx就会走这个函数
/* 涉及到Promisel的底层，promise3个状态，
pending等待resolve成功reject失败
这里如果reject,那么在业务代码那边，就会执行.catch的代码
这里如果resolve,那么在业务代码那边，就会执行.then的代码
因为这里已经是报错了，所以，我们这里必须写reject,告诉业务代码，我们这里报错了，请你用catchi接受一下
但是自己心里要清楚，如果这里写resolve,那么业务那边走的绝对是then里面的代码 */
)
export default request
